<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<th:block th:replace="tpl :: common_head()"></th:block>
		<title>模块编辑</title>
		<link rel="stylesheet" th:href="@{/assets/libs/select2/css/select2.css}" />
		<style>
		.table th, .table td{padding:0 8px 0 0;}
		</style>
	</head>
	<body th:object="${obj}" th:with="entrance='/system/menu/index'">
		<th:block th:replace="tpl :: common_body(~{::.main-right})">
			<div class="main-right">
				<h1 class="main-right-h1">菜单管理</h1>
				<ul class="main-right-tab">
					<li><a href="index">菜单列表</a></li>
				    <li class="selected" th:if="*{id==null}">新增模块</li>
				    <li class="selected" th:if="*{id!=null}">编辑模块</li>
				</ul>
				<form class="form" method="POST">
<fieldset>
	<legend>模块信息</legend>
	<dl>
		<dt>模块名称</dt>
		<dd>
			<input type="text" th:field="*{name}" placeholder="菜单名称至少2个字符" data-verify="required(2)" />
		</dd>
		<dt>图标</dt>
		<dd>
			<input type="text" th:field="*{icon}"  data-verify="required" />
		</dd>
		<dt>排序</dt>
		<dd>
			<input type="text" th:field="*{sort}" data-verify="int(1,10000)" />
		</dd>
	</dl>
</fieldset>
<fieldset>
	<legend>菜单信息</legend>
	<table class="table">
		<colgroup>
			<col width="80" />
			<col width="80" />
			<col width="60" />
			<col width="50" />
			<col width="15" />
		</colgroup>
		<thead>
			<tr><td>菜单名称</td><td>链接</td><td>权限</td><td>排序</td><td>操作</td></tr>
		</thead>
		<tbody>
			<tr th:each="childrenMenu,stat : ${menuNodes}">
			 	<td>
			 		<input type="hidden" th:name="'menuNodes['+${stat.count-1}+'].id'" data-verify="required" th:value="${childrenMenu.id}" /> 
			 		<input type="text" th:name="'menuNodes['+${stat.count-1}+'].name'" data-verify="required" th:value="${childrenMenu.name}" /> 
			 	</td>
				<td>
					<input type="text" th:name="'menuNodes['+${stat.count-1}+'].url'" data-verify="required" th:value="${childrenMenu.url}" /> 
				</td>
				<td>
					<select th:name="'menuNodes['+${stat.count-1}+'].permissionId'">
						<optgroup th:each="domain:${domains}" th:with="subPermissions=${permissions.?[domain!=null and domain.equals(#root.domain)]}" th:label="${domain}">
							<option th:each="op:${subPermissions}" th:value="${op.id}" th:text="${op.name}" th:selected="${op.id==childrenMenu.permissionId}"></option>
						</optgroup>
				  	</select>
				</td>
				<td>
					<input type="text" th:name="'menuNodes['+${stat.count-1}+'].sort'" data-verify="required" th:value="${childrenMenu.sort}" /> 
				</td>
				<td>
					<a class="delete">删除</a>
				</td>
			 </tr>
			 <tr id="addRow" style="cursor:pointer;"><td colspan="5" align="center">+&emsp;添加菜单&emsp;+</td></tr>
		</tbody>
	</table>
</fieldset>
<input type="submit" value="保存修改" />
<input type="button" class="btn-delete" value="删&emsp;&emsp;除" th:if="*{id!=null}" />
				</form>
			</div>
		</th:block>
		<script th:src="@{/assets/libs/select2/js/select2.min.js}"></script>
		<script>
		$(function(){
			var index=[[${menuNodes!=null?menuNodes.size():0}]];
			var permissionOptions=$("#permissionId").html();
			var tpl=document.getElementById("menuTpl").innerHTML.replace("OPTIONS",permissionOptions);
			$(".delete").click(function(){
				$(this).parents("tr").remove();
			});
			$("#addRow").click(function(){
				var targetHtml=tpl.replace(/INDEX/g,index++);
				$(targetHtml).insertBefore("#addRow").find(".delete").click(function(){
					$(this).parents("tr").remove();
				});
			})
		});
		</script>
		<script id="menuTpl" type="text/html">
		<tr>
		<td>
			<input type="text" name="menuNodes[INDEX].name" data-verify="required" /> 
		</td>
		<td>
			<input type="text" name="menuNodes[INDEX].url" data-verify="required" /> 
		</td>
		<td>
			<select name="menuNodes[INDEX].permissionId">
				OPTIONS
		  	</select>
		</td>
		<td>
			<input type="text" name="menuNodes[INDEX].sort" data-verify="required" /> 
		</td>
		<td>
			<a class="delete">删除</a>
		</td>
		</tr>
		</script>
		<script id="permissionId" type="text/html">
		<optgroup th:each="domain:${domains}" th:with="subPermissions=${permissions.?[domain!=null and domain.equals(#root.domain)]}" th:label="${domain}">
			<option th:each="op:${subPermissions}" th:value="${op.id}" th:text="${op.name}"></option>
		</optgroup>
		</script>
	</body>
</html>